<template>
  <div>
        <el-tabs v-model="activeIndex" @tab-click="changeTab">
          <el-tab-pane label="服务产品" name="1">
            <el-table :data="productList" style="width: 100%" class="pr20 pl20">
              <el-table-column label="产品信息">
                <template slot-scope="scope">
                  <div class="product-box" @click="showDetail(scope.row, 'product')">
                    <div>
                      <img :src="`/api/public/file/v1/public/get/${scope.row.productImg}`" class="product-box_img" alt="" @error="setDefaultImage">
                    </div>
                    <p class="ml10">{{ scope.row.productName }}</p>
                  </div>
<!--                  <span style="margin-left: 10px">{{ scope.row.date }}</span>-->
                </template>
              </el-table-column>
              <el-table-column label="价格" width="280">
                <template slot-scope="scope">
                  <p class="color-red">{{ `${$priceFormat(scope.row.limitPrice ,scope.row.upperPrice)}元` }}</p>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      type="text"
                      @click="removeItem( scope.row, 'product')">移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination class="pagination_box" @size-change="productSizeChange"
                           @current-change="productCurrentChange"
                           :current-page="productPageData.currentPage"
                           :page-sizes="[100, 200, 300, 400, 500]"
                           :page-size="productPageData.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           hide-on-single-page
                           :total="productPageData.totalPage">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="服务商" name="2">
            <el-table :data="serviceList" style="width: 100%" class="pr20 pl20">
              <el-table-column label="服务商信息">
                <template slot-scope="scope">
                  <div class="row-start-col-center" @click="showDetail(scope.row, 'service')">
                    <div>
                      <img :src="`/api/public/file/v1/public/get/${scope.row.companyLogo}`" class="product-box_img" alt="" @error="setDefaultImage">
                    </div>
                    <div class="ml20">
                      <div class="comTile">{{scope.row.companyName}}</div>
                      <div>服务商地址：{{scope.row.companyAddress}}</div>
                      <div>工作时间：{{ `${workDate(scope.row.workDate)}  ${scope.row.workBeginTime}——${scope.row.workEndTime}` }}</div>
                      <div>联系电话：{{ scope.row.companyPhone }}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                      size="medium"
                      type="text"
                      @click="removeItem( scope.row, 'service')">移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination class="pagination_box" @size-change="serviceSizeChange"
                           @current-change="serviceCurrentChange"
                           :current-page="servicePageData.currentPage"
                           :page-sizes="[100, 200, 300, 400, 500]"
                           :page-size="servicePageData.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           hide-on-single-page
                           :total="servicePageData.totalPage">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
  </div>
</template>
<script>
import {getProductCollect, getServiceCollect, productCollectCancel, serviceCollectCancel} from "@/api/homeApi";
import { workDate } from '@/utils/index'
export default {
  data() {
    return {
      workDate,
      activeIndex: '1',
      productPageData: {
        totalPage: 0,
        currentPage: 1,
        pageSize: 10,
      },
      servicePageData: {
        totalPage: 0,
        currentPage: 1,
        pageSize: 10,
      },
      productList: [],
      serviceList: []
    }
  },
  components: {
  },
  created() {
    this.getProductCollectList()
  },
  methods: {
    setDefaultImage(event) {
      event.target.src = require('@/assets/image/error.jpg');
    },
    changeTab(tab, event) {
      if (tab.name == 1) {
        this.getProductCollectList()
      } else {
        this.getServiceCollectList()
      }
    },
    productSizeChange(val) {
      this.$set(this.productPageData, 'pageSize', val);
      this.getProductCollectList()
    },
    productCurrentChange(val) {
      this.$set(this.productPageData, 'currentPage', val);
      this.getProductCollectList()
    },
    serviceSizeChange(val) {
      this.$set(this.servicePageData, 'pageSize', val);
      this.getServiceCollectList()
    },
    serviceCurrentChange(val) {
      this.$set(this.servicePageData, 'currentPage', val);
      this.getServiceCollectList()
    },
    getProductCollectList() {
      getProductCollect({
        pageNo: this.productPageData.currentPage,
        pageNum: this.productPageData.pageSize
      }).then(res => {
        if (res.code == 200) {
          this.productList = [...res.rows];
          this.productList.forEach(item => {
            item.productImg = item.productImg.includes('|') ? item.productImg.split('|')[0] : item.productImg;
          })
          this.$set(this.productPageData, 'total', res.total)
        }
      })
    },
    getServiceCollectList() {
      getServiceCollect({
        pageNo: this.servicePageData.currentPage,
        pageNum: this.servicePageData.pageSize
      }).then(res => {
        if (res.code == 200) {
          this.serviceList = [...res.rows];
          this.$set(this.servicePageData, 'totalPage', res.total)
        }
      })
    },
    removeItem(row, type) {
      let self = this
      self.$confirm('确定要移除此项?', '温馨提示', {
        type: 'warning',
        beforeClose(action, instance, done ) {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '加载中...'
            if (type === 'product') {
              productCollectCancel({productId: row.productId}).then(res => {
                if (res.code === 200) {
                  self.$message.success('取消收藏成功！')
                }
              }).finally(() => {
                done()
                instance.confirmButtonLoading = false
                self.getProductCollectList()
              })
            } else {
              serviceCollectCancel({serviceId: row.serviceId}).then(res => {
                if (res.code === 200) {
                  self.$message.success('取消收藏成功！')
                }
              }).finally(() => {
                done()
                instance.confirmButtonLoading = false
                self.getServiceCollectList()
              })
            }
          }
        }
      })
    },
    showDetail(row, type) {
      let path = ''
      if (type === 'product') {
        path = `/productDetail?id=${row.productId}`
      } else {
        path = `/companyDetail?id=${row.serviceId}`
      }
      this.$router.push({
        path
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/css/element-variables";
:deep(.el-tabs__nav) {
  margin-top: 10px;
}
:deep(.el-tabs__nav-scroll) {
    padding-left: 40px;
}
:deep(.el-tabs__item) {
  color: $text-color-grey;
  min-width: 100px;
}

:deep(.el-tabs__item.is-active) {
  color: $--color-primary !important;
  font-weight: bold;
}

:deep .el-tabs__item:hover {
  color: $--color-primary;
}

:deep(.el-tabs__active-bar) {
  background-color: $--color-primary;
}

:deep .el-table thead {
  color: $text-color;
  font-size: $font-size-md;
}
.comTile{
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: $text-color;
  margin-bottom: 5px;
  font-weight: bold;
}
.product-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.product-box_img {
  width: 80px;
  height: 80px;
}


</style>
